<template>
  <el-dialog
    title="黑名单关联群组调整"
    :visible.sync="dialogVisible"
    :before-close="cancel"
    :close-on-press-escape=false
    :close-on-click-modal=false>
  <el-form :inline="true" ref="ruleForm" :rules="rule" :model="form">
    <el-table
      border
      :data="form.dialogTableData"
    >
      <el-table-column
        align="center"
        label="内容"
        min-width="25%">
        <template slot-scope="{row}">{{row.content}}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="记录群组"
        min-width="25%">
        <template slot-scope="{row}"><span  :class="{'danger':row.levelRegister!=1 && !row.isDisable}">{{row.isDisable ? '--' : toLevelStr(row.levelRegister)}}</span></template>
      </el-table-column>
      <el-table-column
        align="center"
        label="当前群组"
        min-width="25%">
        <template slot-scope="{row}">{{row.isDisable ? '--' : toLevelStr(row.levelNow)}}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="调整群组"
        min-width="25%">
        <template slot-scope="{row,$index}" >
          <el-form-item :prop="'dialogTableData.' + $index + '.levelId'" :rules="rule.levelId" v-if="!row.isDisable">
          <el-select v-model="row.levelId" placeholder="请选择群组" >
            <el-option
              v-for="item in triggerGroup"
              :key="item.levelId"
              :label="item.levelName"
              :value="item.levelId?item.levelId:1">
            </el-option>
          </el-select>

        </el-form-item>
        <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
   </el-form>
    <div class="textarea">
      <p>
        <span>*</span>
        备注
      </p>
      <el-input
        :class="tipShow ? 'danger' : ''"
        type="textarea"
        :rows="4"
        maxlength="22"
        v-model.trim="sendData.remark" >
      </el-input>
      <p class="tip">
        <span v-if="tipShow">备注不能为空</span>
      </p>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>

  </el-dialog>
</template>

<script>
import { form, factory } from '@/build';
import {
  risBlackListAdjustApi,
} from '@/services/api/risk';

export default {
  name: 'change-level-dialog',
  mixins: [form, factory],
  props: ['dialogVisible', 'dialogTableData', 'adjustId', 'triggerGroup'],
  data() {
    return {
      tableData: [],
      // form: {
      //   dialogTableData: this.dialogTableData,
      // },
      sendData: {
        id: this.adjustId,
        reqData: [],
        remark: '',
      },
      tipShow: false,
      result: {},
      rule: {
        levelId: [
          { required: true, message: '请选择群组', trigger: 'change' },
        ],
      },
    };
  },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
    confirm() {
      if (!this.sendData.remark) {
        this.tipShow = true;
        return;
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.doSave({ action: 'saveAdjust' });
        }
      });


    },
    toLevelStr(val) {
      const levelStr = _.find(this.triggerGroup, { levelId: val });
      return levelStr ? levelStr.levelName : '';
    },
    pushData(item, data) {
      const {
        content, levelId, levelNow, index,
      } = item;
      const reqContent = content.split(':')[1];
      data.reqData.push({
        content: reqContent, level: levelId, oldLevel: levelNow, blackType: index,
      });
    },
    // 处理数据
    handleData(data) {
      _.forEach(this.form.dialogTableData, (item) => {
        if (item.levelId !== item.levelNow) {
          this.pushData(item, data);
        }
      });
      // 对只有备注而没有调整等级的情况
      if (data.reqData.length === 0) {
        _.forEach(this.form.dialogTableData, (item) => {
          this.pushData(item, data);
        });
      }
      return data;
    },
  },
  computed: {
    form() {
      return {
        dialogTableData: this.dialogTableData,
      };
    },
    adjustData() {
      return {
        id: this.adjustId,
      };
    },
  },
  mounted() {
    this.bindSave(risBlackListAdjustApi, 'saveAdjust', 'sendData', {
      successMessage: '关联等级调整成功',
      beforeSend: data => this.handleData(data)
      ,
      afterSuccess: ([result, data]) => {
        if (result) {
          this.$parent.gridSearch();
          this.tipShow = false;
          this.$emit('cancel');
        }
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.textarea {
  margin-top: 20px;
  p {
    span {
      color: #FF0000;
    }
  }
  .tip {
    margin: 0;
    height: 20px;
    line-height: 18px;
    color: #FF0000;
    font-size: 14px;
  }

  .danger {
    /deep/ .el-textarea__inner {
      border: 1px solid #FF0000 !important;
    }
  }
}
.danger{color:#FF0000}
/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{margin-bottom:0}
</style>
